<?php
 $meses[0]="Enero";
 $meses[1]="Febrero";
 $meses[2]="Marzo";
 $meses[3]="Abril";
 $meses[4]="Mayo";
 $meses[5]="Junio";
 $meses[6]="Julio";
 $meses[7]="Agosto";
 $meses[8]="Septiembre";
 $meses[9]="Octubre";
 $meses[10]="Noviembre";
 $meses[11]="Diciembre";
?>
<script language='javascript'>
	var chart;
	var otro;
	var ops;
	var typeReport;
	
	function drawTablaReport(res){
		function getMesByIndex(id){
			var imes = 0;
			if(id == 0)	return "Enero";
			if(id == 1)	return "Febrero";
			if(id == 2)	return "Marzo";
			if(id == 3)	return "Abril";
			if(id == 4)	return "Mayo";
			if(id == 5)	return "Junio";
			if(id == 6)	return "Julio";
			if(id == 7)	return "Agosto";
			if(id == 8)	return "Septiembre";
			if(id == 9)	return "Octubre";
			if(id == 10)	return "Noviembre";
			if(id == 11)	return "Diciembre";		
		}
		
		var im = 0;
		var totales =  res.totales;
		var hombres =  res.totalm;
		var mujeres =  res.totalf;
		var lideres =  res.nlideres;
		var discipulos =  res.ndisicpulos;
		$("#tlReporte").html("");
		var mes;
		var clase;
		for(i in totales){
			var mes = getMesByIndex(im);
			
			if(im%2 == 0) clase = " class='blank' ";
			else clase = " class='blue' ";
			$("#tlReporte").append('<tr '+clase+' ><td>'+mes+'</td><td>'+mujeres[i]+'</td><td>'+hombres[i]+'</td><td>'+lideres[i]+'</td><td>'+discipulos[i]+'</td><td>'+totales[i]+'</td></tr>');
			im++;
		}
	}
	function requestData() {
		var imes = $("#slrMesInicial").val();
		var fmes = $("#slrMesFinal").val();
		var anio = $("#slrAnio").val();
		var tipoG = $("#slrTipoGrupo").val();
		var iglesia = $("#slrIglesia").val();
		
		$("#btnGenerarReporte").attr("value","Cargando...");
		$("#btnGenerarReporte").attr("disabled",true);
		
   	 	$.ajax({
	        url: utility.makeUrl("publics/loadReport"),
			dataType:"json",
			type:"POST",
			data:"imes="+imes+"&fmes="+fmes+"&anio="+anio+"&tid="+tipoG+"&iglesia_id="+iglesia,
	        success: function(res) {
				
				drawTablaReport(res.response.data);
				
				var totales = res.response.data.totales;
				var hombres = res.response.data.totalm;
				var mujeres = res.response.data.totalf;
				
				var lideres = res.response.data.nlideres;
				var discipulos = res.response.data.ndisicpulos;
				
				chart.series[0].setData(totales);
				chart.series[1].setData(hombres);
				chart.series[2].setData(mujeres);
				
				chart.series[3].setData(lideres);
				chart.series[4].setData(discipulos);
				
				$("#btnGenerarReporte").attr("value","Generar");
				$("#btnGenerarReporte").attr("disabled",false);
				
				$("#spTipo").text($("#slrTipoGrupo option[value='"+tipoG+"']").text());
				$("#spMesi").text($("#slrMesInicial option[value='"+imes+"']").text());
				$("#spMesf").text($("#slrMesFinal option[value='"+fmes+"']").text());
				$("#spIglesia").text($("#slrIglesia option[value='"+iglesia+"']").text());
				$("#spAnio").text($("#slrAnio option[value='"+anio+"']").text());
	        },
	        cache: false
	    });
	}
$(document).ready(function() {
	 $("#btnGenerarReporte").click(function(){requestData();});
	 chart = new Highcharts.Chart({
        chart: {
            renderTo: 'dGrafico',
			defaultSeriesType: 'spline',
			zoomType: 'x'
        },
        title: {
            text: 'Inscritos por Grupo'
        },
        xAxis: {
			categories: [
	            'Enero', 
	            'Febrero', 
	            'Marzo', 
	            'Abril', 
	            'Mayo',
	            'Junio',
	            'Julio',
	            'Agosto',
	            'Septiembre',
	            'Octubre',
	            'Noviembre',
	            'Diciembre'
		         ]
			,
	         labels: {
	            rotation: -45,
	            align: 'right',
	            style: {
	                font: 'normal 13px Verdana, sans-serif'
	            }
	         },
			 type: 'month'
        },
        yAxis: {
            /*minPadding: 0.2,
            maxPadding: 0.2,*/
            title: {
                text: 'Cantidad',
                margin: 0
            },
			maxZoom: 14 * 24 * 3600000
        },
		tooltip: {
         	formatter: function() {
            	return 'En el mes de <strong>'+ this.x +'</strong>, hay <strong>'+this.y+'</strong> inscritos<br/>';
       		}
      	},
        series:[
			{
            	name: 'Inscritos',
            	data: []
        	},
			{
            	name: 'Hombres',
            	data: []
        	},
			{
            	name: 'Mujeres',
            	data: []
        	},
			{
            	name: 'Lideres',
            	data: []
        	},
			{
            	name: 'discipulos',
            	data: []
        	}
		]
    });      
});
</script>
<style>
	.ul_reporte1 li ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.ul_reporte1 li ul li{
		display:inline;
	}
	.ul_reporte1 li{
		padding-bottom:3%;
	}
</style>
<ul class="ul_reporte1">
	<li><h4>Número de inscritos por Grupo</h4></li>
	<li>
		<label>Tipo de Grupo</label>
		<select id="slrTipoGrupo">
			<?php foreach($tipos as $t):?>
				<option value="<?php echo $t['Tipogrupo']['id'];?>"><?php echo $t['Tipogrupo']['nombre'];?></option>
			<?php endforeach;?>					
		</select>
	</li>
	<li>
		<label>Iglesia</label>
		<select id="slrIglesia">
			<?php foreach($iglesias as $i):?>
				<option value="<?php echo $i['Iglesia']['id'];?>"><?php echo $i['Iglesia']['nombre'];?></option>
			<?php endforeach;?>					
		</select>
	</li>
	<li>
		<ul>
			<li>	
				<label>Mes inicial</label>
				<select id="slrMesInicial">
					<option value="-1">--</option>
					<?php for($i=0;$i<count($meses);$i++):
							if($i==0) $selected = " selected='selected' ";
							else $selected = "";
					?>
						<option <?php echo  $selected;?> value="<?php echo $i;?>"><?php echo $meses[$i];?></option>
					<?php endfor;?>	
				</select>
			</li>
			<li>	
				<label>Mes Final</label>
				<select id="slrMesFinal">
					<option value="-1">--</option>
					<?php for($i=0;$i<count($meses);$i++):
							if($i==11) $selected = " selected='selected' ";
							else $selected = "";
					?>
						<option <?php echo  $selected;?> value="<?php echo $i;?>"><?php echo $meses[$i];?></option>
					<?php endfor;?>	
				</select>
			</li>
			<li>	
				<label>Año a consultar</label>
				<select id="slrAnio">
					<option value="-1">--</option>
					<?php
						$cyear = date("Y"); 
						for($i=1999;$i<2020;$i++):
							if($cyear == $i) $selected = " selected='selected' ";
							else $selected = "";
						?>
						<option <?php echo  $selected;?> value="<?php echo $i;?>"><?php echo $i;?></option>
					<?php endfor;?>	
				</select>
			</li>
			<li><input type="button" value="Generar" id="btnGenerarReporte"/></li>
			<li>
				<div id="dGrafico" style="height: 400px;margin-top:2%;"></div>
			</li>
			<li>
				<table class="centrar">
					<caption>
						<label>Detalle del reporte</label>
						<ul>
							<li>Tipo de Grupo: <span id="spTipo"></span></li>
							<li>Iglesia: <span id="spIglesia"></span></li>
							<li>Mes inicial: <span id="spMesi"></span> Mes final <span id="spMesf"></span> del año <span id="spAnio"></span></li>
						</ul>
					</caption>
					<thead>
						<tr>
							<th>Mes</th>
							<th>Mujeres</th>
							<th>Hombres</th>
							<th>Lideres</th>
							<th>Discípulos</th>
							<th>Total</th>
						</tr>
					</thead>
					<tbody id="tlReporte"></tbody>
				</table>
			</li>
		</ul>
	</li>
</ul>